<template>
	<view class="container">
		<u-sticky>
			<view class="header" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
				<view class="title" :style="{ height: menuButtonInfo.height + 'px', lineHeight: menuButtonInfo.height + 'px' }">个人中心</view>
				<view class="content">
					<view class="userinfo">
						<view class="head">
							<image :src="userInfo?.header"></image>
						</view>
						<view class="info">
							<view class="name">
								<text class="first">{{ userInfo?.nickname }}</text>
								<text class="tag">{{ userInfo?.level_text }}</text>
								<uni-icons type="help" size="16" color="#fff" @click="help"></uni-icons>
							</view>
							<view class="subname">代理商编号：{{ userInfo?.number }}</view>
						</view>
					</view>
					<view class="msgTips" @click="gotoMsg">
						<uni-badge :text="num" type="success" size="small" absolute="rightTop" :offset="[3, 3]">
							<uni-icons type="chat" size="24" color="#fff"></uni-icons>
						</uni-badge>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="menu">
					<view class="menu-box">
						<view class="menu-item" @click="gotoPage(1)">
							<image class="icon" src="../../static/images/menu-icon1.png"></image>
							<view class="name">收入明细</view>
						</view>
						<view class="menu-item" @click="gotoPage(2)">
							<image class="icon" src="../../static/images/menu-icon2.png"></image>
							<view class="name">提现明细</view>
						</view>
						<view class="menu-item" @click="gotoPage(3)">
							<image class="icon" src="../../static/images/menu-icon3.png"></image>
							<view class="name">申请补货</view>
						</view>
						<view class="menu-item" @click="gotoPage(4)">
							<image class="icon" src="../../static/images/menu-icon4.png"></image>
							<view class="name">推广海报</view>
						</view>
						<view class="menu-item" @click="callPhone(5)">
							<image class="icon" src="../../static/images/menu-icon5.png"></image>
							<view class="name">联系平台</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { get, post } from '@/request/index.js';

// 获取屏幕边界到安全区域距离
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
const phone = ref('');
// 用户信息
let userInfo = ref({
	header: '../../static/images/defaultHead.png'
});

onLoad(() => {
	getUserInfo();
	getMessageData();
	getContent();
});

//获取用户信息
const getUserInfo = async () => {
	const res = await get('agent/user/info');
	if (res.code == 200) {
		let userinfo = JSON.parse(uni.getStorageSync('userinfo'));
		const newData = levelTransformText(res.data);
		const datas = { ...userInfo.value, ...userinfo, ...newData };
		userInfo.value = datas;
		uni.setStorageSync('userinfo', JSON.stringify(datas));
	}
};
//代理商等级数字转文字
const levelTransformText = (data) => {
	if (data.level == 1) {
		data.level_text = '一星代理商';
	} else if (data.level == 2) {
		data.level_text = '二星代理商';
	} else if (data.level == 3) {
		data.level_text = '三星代理商';
	} else if (data.level == 4) {
		data.level_text = '四星代理商';
	} else if (data.level == 5) {
		data.level_text = '五星代理商';
	}
	return data;
};
//获取未读消息数量
let num = ref(0);
const getMessageData = async () => {
	const res = await get('agent/notice/count');
	if (res.code == 200) {
		num.value = res.data.count;
	}
};
//跳转代理介绍页面
const help = () => {
	uni.navigateTo({
		url: '/pages/dailijieshao/dailijieshao'
	});
};
//跳转消息列表页面
const gotoMsg = () => {
	uni.navigateTo({
		url: '/pages/message/message'
	});
};

const getContent = async () => {
	const res = await post('mm/baseInfo');
	const { code, data } = res;
	if (code == 200) {
		phone.value = data.platform_phone;
	}
};

const gotoPage = (n) => {
	let str = '';
	if (n == 1) {
		str = '/pages/shourumingxi/shourumingxi';
	} else if (n == 2) {
		str = '/pages/tixianmingxi/tixianmingxi';
	} else if (n == 3) {
		str = '/pages/shenqingbuhuo/shenqingbuhuo';
	} else if (n == 4) {
		str = '/pages/tuiguanghaibao/tuiguanghaibao';
	}
	uni.navigateTo({
		url: str
	});
};
//联系平台
const callPhone = () => {
	uni.makePhoneCall({
		phoneNumber: phone.value
	});
};
</script>
